<template>
  <div class="cls1" ref="chartSC"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import request from '../axios/request'
const chartSC = ref()

function chartsInit(data) {
  var x = [];
  var y = [];

  for (var i = 0; i < data.length; i++) {
    x.push(data[i].python);
    y.push(data[i].num);
  }

  var myChart = echarts.init(chartSC.value, 'Light');

  // 配置饼图的option
  var option = {
    title: {
      text: '对python语言的掌握程度', // 修改标题文本，更贴合饼图含义
      textStyle: {
        color: '#1784DB',
        fontSize: 20,
        // textAlign: 'center',
        left:300,
      },
      left: '15%',
      top: '7%'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b}: {d}%" // 修改提示框格式，显示名称和占比
    },
    grid: {
            left: '10%',
            right: '10%',
            bottom: '20%',
            top: '10%',
            containLabel: true,
            width: '80%', /* 增大grid的width属性值，可根据实际情况调整占比 */
            height: '75%' /* 增大grid的height属性值，可根据实际情况调整占比 */
        },

    series: [
      {
        name: '',
        type: 'pie',
        radius: '50%',
        center: ['250', '50%'], // 设置饼图在容器中的位置为中心
        data: y.map((value, index) => ({ value, name: x[index] })), // 将获取到的数据整理成饼图所需格式
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

// 组件挂载成功
onMounted(function () {
  // 发起axios异步请求，获取数据
  request({
    url: '/stu-api/queryAllpy',  // 配置的代理请求会拦截
    method: 'get'
  }).then(res => {
    console.log(res.data);
    chartsInit(res.data.data)
  }).catch((error) =>
    console.log(error))
})
</script>

<style scoped>
.cls1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>